import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import BookIntroTop from './BookIntroTop'
import Comment from './Comment'
export default class BookIntro extends Component  {
  render(){
    const detail = this.props.detail
    const comment = this.props.comment || []
    return (
      <div className="bookIntro">
        <div className='bookIntroHeader'>
          <div className="backBtn">
            <Link to='/'>
              <i className="fa fa-angle-left fa-2x" aria-hidden="true"></i>
              返回
            </Link>
          </div>
          <div className="serchResultIntro">
            书籍详情
          </div>
          <div className="homeBtn">
                    <Link to='/'>
                        <i className="fa fa-home fa-lg" aria-hidden="true"></i>
                    </Link>
          </div>
        </div>
        <div className="bookIntroMainSection">
          <BookIntroTop
            detail={detail}/>
          <div className="bookReaderComment">
            <div className="commentHeader">
              热门书评
            </div>
            <div className="hotCommentWrap">
              {comment.map((comment)=>{
                return(
                  <Comment
                    key={comment._id}
                    comment={comment}/>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    )
  }
}